<template>
  <div>
    <div class="def">
      <p style="text-align:center;font-size:24px;
      margin-bottom:18px;">订单信息</p>
      <!-- <div class="header">全部订单 </div> -->
      <!-- 遍历订单商品,外层-->
      <div v-if="this.orders.length !== 0">
        <div class="header main" v-for="order in orders" :key="order.order_user_id">
          <span>{{order.order_time}}</span>
          订单号:
          <span>{{order.order_user_id}}</span>
          <i @click="deleteOrder(order.order_user_id)" class="el-icon-delete" style="float:right;color:#E64347;"></i>
          <div style="clear:both;"></div>
          <!-- 内层遍历 -->
          <div class="order" v-for="child in order.children" :key="child.order_goods_id">
            <div><img :src="child.goods_url"></div>
            <div>子订单:<span style="color:black;">{{child.order_goods_id}}</span></div> 
            <div style="width:200px;">
              <span style="font-size:12px;">{{child.goods_title}}</span>
            </div>
            <div><span>{{child.order_num}}件</span></div>
            <div><span>￥{{child.goods_price}}</span></div>
            <div style="float:right;">
              <i @click="deleteSonOrder(child.order_goods_id)" class="el-icon-delete" style="float:right;"></i>
              <br><br><button @click="again">再来一单</button>
            </div>
          </div>

        </div>
      </div>
      <!-- 没有订单 -->
      <div v-if="this.orders.length === 0">
        <el-empty description="订单为空，前往购物！">
          <button @click="goShopping">去购物</button>
        </el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import {reqOrderList,reqDeleteOrder,reqDeleteSonOrder} from '../../api'
import {dealArray} from '../../api/utils.js'
export default {
    name:'Order',
    data() {
      return {
        orders:[]
      }
    },
    async mounted() {
      if(this.$local.isExist('key')){
        this.orders = dealArray(await reqOrderList(this.$local.get('key')))
      }else{
        this.$message.error('登录令牌不存在！')
        this.$router.push('/user/info')
      }
    },
    methods: {
      async deleteOrder(id){
        await reqDeleteOrder(id)
        if(this.$local.isExist('key')){
          this.orders = dealArray(await reqOrderList(this.$local.get('key')))
          this.$message.success('订单删除成功！')
        }else{
          this.$message.error('登录令牌不存在！')
          this.$router.push('/user/info')
        }
      },
      async deleteSonOrder(id){
        await reqDeleteSonOrder(id)
        if(this.$local.isExist('key')){
          this.orders = dealArray(await reqOrderList(this.$local.get('key')))
          this.$message.success('子订单删除成功！')
        }else{
          this.$message.error('登录令牌不存在！')
          this.$router.push('/user/info')
        }
      },
      goShopping(){ 
        this.$router.push('/mall')
      },
      again(){
        this.$message.success('正在努力开发中。。。')
      }
    },
}
</script>

<style scoped>
  .def{
    margin-top: 30px;
    padding:0 16px 0 16px;
  }
  .header{
    border-radius: 5px;
    background:white;
    padding: 12px 10px;
    margin-bottom: 10px;
  }
  .main{
    font-size: 14px;
    color: gray;
  }
  .main > span{
    margin-right: 30px;
    color: black;
  }
  .order{
    margin-top: 10px;
    max-width: 100%;
  }
  .order div{
    display:inline-block;
    vertical-align: text-top;
  }
  .order div:nth-of-type(n+2){
    margin-left: 20px;
  }
  img{
    width: 80px;
    height: 80px;
  }
</style>